/**
* @tpl uni-app自定义弹窗组件 - uniPop.vue
* @author andy by 2019-09-20
* @about Q：282310962 wx：xy190310
*/

<template name="uniPops">
	<view v-if="isVisible" class="mask" @click="close()">
		<view class="customerWrap">
			<view class="customerFail">
				<image src="../../static/image/close.png"></image>
			</view>
			<view class="customerTitle">
				<text>在线客服</text>
				
				<view class="customerFlex">
					<view class="customerPoint"></view>
					<text>搜索并关注<text style="color: #4CD964;font-size: 26rpx;">“蜜袋互助”</text>微信公众号</text>
				</view>
				
				<view class="customerFlex">
					<view class="customerPoint"></view>
					<text>请在公众号留言，会有客服回复</text>
				</view>
				
				<view class="customerWechat">
					<image src="../../static/image/wxCode.jpg"></image>
				</view>
                
				<view class="customerBottom">
					<text>长按图片并识别二维码关注公众号：蜜袋互助</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name:'uniPops',
		data() {
			return {
				isVisible: false
			}
		},
		methods: {
			// 显示弹窗事件（处理传参）
			show() {
				this.isVisible = true
			},
			close() {
				this.isVisible = false;
			}
		}
	}
</script>
<style>
	.mask {
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.customerWrap {
		width: 600rpx;
		height: 780rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 1) 24%, rgba(238, 255, 230, 1) 98%);
		border-radius: 30rpx;
		position: relative;
	}

	.customerFail image {
		width: 22rpx;
		height: 22rpx;
		position: absolute;
		right: 40rpx;
		top: 40rpx;
	}

	.customerTitle {
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(0, 0, 0, 1);
	}

	.customerTitle text:first-child {
		font-size: 40rpx;
		margin-bottom: 40rpx;
	}

	.customerTitle text:nth-child(2) {
		font-size: 26rpx;
	}

	.customerTitle text:nth-child(3) {
		font-size: 28rpx;
	}
	.customerFlex{
		display: flex;
		align-items: center;
		width: 450rpx;
		text-align: left;
	}
	.customerFlex:first-of-type{
		margin-bottom: 10rpx;
	}
	.customerPoint{
		width:8rpx;
		height:8rpx;
		background:rgba(110,200,70,1);
		border-radius:50%;
		margin-right: 10rpx;
	}
	.customerWechat image{
		width: 330rpx;
		height: 330rpx;
		margin: 74rpx auto 52rpx;
	}
	.customerBottom text{
		font-size:24rpx!important;
		color:rgba(110,200,70,1);
	}
</style>
